<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">授信申请</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    授信银行：<span>{{ details.creditAmountApply.bank || "" }}</span>
                </el-col>
                <el-col :span="8">
                    授信有效期：<span v-if="details.creditAmountApply.timeValid">{{ details.creditAmountApply.timeValid | dateYMDFormat }} 至 {{ details.creditAmountApply.timeExpiry | dateYMDFormat }}</span>
                </el-col>
                <el-col :span="8">
                    授信利率：<span>{{ details.creditAmountApply.rate || "0" }}%</span>
                </el-col>
                <el-col :span="8">
                    银行授信额度：<span>{{ details.creditAmountApply.bankAmount| thousands }}</span>
                </el-col>
                <el-col :span="8">
                    平台授信额度：<span>{{ details.creditAmountApply.amount| thousands }} 元</span>
                </el-col>
                <el-col :span="8" v-if="details.creditAmount.currentAmount && type === 0">
                    剩余额度：<span>{{ details.creditAmount.currentAmount| thousands}} 元</span>
                </el-col>
                <el-col :span="8" v-if="details.creditAmount && type === 0">
                    状态：<span>{{details.creditAmountApply.status ? creditState[details.creditAmountApply.status].label:""}}</span>
                </el-col>
            </el-row>

        </c-template>
        <c-template class="mb-lg tf-paragraph" v-for="(item, index) in list" :key="index">
            <!--   label-position="top" -->
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">{{item.name}}</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <c-form-template>
                    <el-col :span="d.row" v-for="(d, j) in item.list" :key="j">
                        <!-- 输入框 -->
                        <el-form-item v-if="d.type === 'text'" :label='d.name+"："' :prop="d.key">
                            <el-input v-if="!d.disabled" v-model="form[d.key]" :placeholder="`请输入${d.name}`" :disabled="d.disabled" />
                            <span v-else>{{ form[d.key] }} </span>
                        </el-form-item>
                        <!-- 文本输入框 -->
                        <el-form-item v-else-if="d.type === 'textarea'" :label='!d.disabled?d.name+"：":""' :prop="d.key">
                            <el-input v-if="!d.disabled" type="textarea" v-model="form[d.key]" :placeholder="`请输入${d.name}`" :disabled="d.disabled" :rows="2" />
                            <el-col :span="2" class="pl-0 pr-0" style="width:auto;line-height:normal" v-else>{{d.name}}：</el-col>
                            <el-col :span="22" style="line-height: 22px;"> <span v-if="d.disabled">{{form[d.key]}}</span></el-col>
                        </el-form-item>
                        <!-- 日期 -->
                        <el-form-item v-else-if="d.type === 'time'" :label='d.name+"："' :prop="d.key">
                            <el-date-picker v-if="!d.disabled" v-model="form[d.key]" type="date" class="wh" :placeholder="`请输入${d.name}`" :disabled="d.disabled">
                            </el-date-picker>
                            <span v-else>{{ form[d.key] }}</span>
                        </el-form-item>
                        <!-- 中征码 -->
                        <el-form-item v-else-if="d.type === 'code'" :label='d.name+"："' :prop="d.key">
                            <c-credit-code v-model="form[d.key]" :config="d" />
                        </el-form-item>
                        <!-- 选择文件 -->
                        <el-form-item v-if="d.type === 'file'" :label='d.name+"："' :prop="d.key">
                            <c-upload :disabled="d.disabled" v-model="form[d.key]" @change="$refs.ruleForm.validateField(d.key)" listType="text" :tip="d.describe" :accept="d.accept" />
                        </el-form-item>
                        <!-- 证件 -->
                        <el-form-item v-else-if="d.type === 'card'" :label='d.name+"："' :prop="d.key">
                            <c-upload :disabled="d.disabled" v-model="form[d.key]" @change="$refs.ruleForm.validateField(d.key)" listType="text" />
                        </el-form-item>
                    </el-col>
                </c-form-template>
            </el-form>
        </c-template>

        <c-template class="tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">审批意见</el-col>
            </el-row>
            <el-divider></el-divider>
            <c-approval-process :id="id" :bankAmount="details.creditAmountApply.bankAmount" :timeExpiry="details.creditAmountApply.timeExpiry" :timeValid="details.creditAmountApply.timeValid" :amount="details.creditAmountApply.bankAmount" :rate="details.creditAmountApply.rate" :bank="details.creditAmountApply.bank" :formData="form" :status="details.creditAmountApply.status" :type="type" @isLoading="changeLoading" @getById="getById"></c-approval-process>
        </c-template>
    </div>
</template>
<script>
import json from "./json";
import cReject from "@/components/reject/index";
import cCreditCode from "./components/c-credit-code.vue";
import cBankPass from "./components/c-bank-pass.vue";
import cApprover from "@/components/approver/index.vue";
import { creditState } from "@/utils/status.js";
import cApprovalProcess from './components/c-approval-process.vue';
export default {
    components: {
        cCreditCode,
        cReject,
        cBankPass,
        cApprover,
        cApprovalProcess
    },
    data () {
        return {
            rules: {},
            form: {},
            list: [],
            creditState: creditState,
            details: {
                creditAmount: {},
                creditAmountApply: {},
            },
            loading: false,
            status: 0,
            // 0-平台   1-银行审批
            type: 0,
            id: ""
        };
    },
    mounted () {
        // console.log(JSON.stringify(json.list));
        this.type = {
            "creditApply-details": 0,
            "bankCredit-details": 1,
        }[this.$route.name];
        this.id = this.$route.query.id;
        this.getById();
    },
    methods: {
        changeLoading (loading) {
            this.loading = loading
        },
        handleSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    // console.log(this.form);
                }
            });
        },

        handleGoPage () {
            this.$router.go(-1);
        },
        getById () {
            const id = this.$route.query.id;
            if (id) {
                this.$get({
                    url: "/sellerCreditAmountApply/getDetails",
                    params: { id },
                }).then((res) => {
                    const template = res.creditTemplate || {};
                    this.details = {
                        id,
                        creditAmount: res.creditAmount || {},
                        creditAmountApply: res.creditAmountApply || {},
                    };
                    this.status = res.creditAmountApply.status;
                    this.form = JSON.parse(template.form);
                    const list = JSON.parse(template.list);
                    this.list = this.getList(list);
                    this.rules = this.getRulesList(list);
                });
            }
        },
        handleSubmit () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    const params = {
                        url: "/DealerCreditAmountApply/replenish",
                        data: {
                            id: this.$route.query.id,
                            form: JSON.stringify(this.form),
                        },
                    };
                    this.loading = true;
                    this.$post(params).then(() => {
                        this.loading = false;
                        this.$message.success("操作成功");
                        this.handleGoPage();
                    });
                }
            });
        },

        getList (list) {
            return list.map((x) => {
                x.list = x.list.map((r) => {
                    if ([2, 3, 4].includes(this.status) || this.type === 1) {
                        r.disabled = true;
                    }
                    return r;
                });
                return x;
            });
        },
        getRulesList (list) {
            const rules = {};
            for (let i = 0; i < list.length; i++) {
                const innerList = list[i].list;
                for (let j = 0; j < innerList.length; j++) {
                    const { required, key, name, type } = innerList[j];
                    if (required) {
                        rules[key] = {
                            text: [
                                {
                                    required: true,
                                    message: `请输入${name}`,
                                    trigger: "blur",
                                },
                            ],
                            textarea: [
                                {
                                    required: true,
                                    message: `请输入${name}`,
                                    trigger: "blur",
                                },
                            ],
                            time: [
                                {
                                    required: true,
                                    message: `请选择${name}`,
                                    trigger: "change",
                                },
                            ],
                            file: [
                                {
                                    type: "array",
                                    required: true,
                                    message: `请选择${name}`,
                                    trigger: "change",
                                },
                            ],
                            code: [
                                {
                                    validator: (rule, value, callback) => {
                                        if (!value) {
                                            callback(new Error(`请选择${name}`));
                                        } else if (value && !value.code) {
                                            callback(new Error(`请输入内容`));
                                        } else {
                                            callback();
                                        }
                                    },
                                    trigger: "change",
                                },
                            ],
                        }[type];
                    }
                }
            }
            return rules;
        },
    },
};
</script>